<template>
  <div class="container">
    <!-- 提示信息 -->
    <div class="alertLabel">
      {{alertLabelText}}
    </div>
    <!-- 确认参与提示框 -->
    <div class=" insufficientMarginDeposits1">
      <div class="box">
        <div class="Title">
          <p>提示</p>
          <i @click="isHide1">
            <img src="../../../static/img/buyCar/details/btn_close.png" alt="">
          </i>
        </div>
        <div class="conten">
          <p>您的竞拍出价为{{amount == '' ? 0 : amount.getAns()}}元</p>
          <div class="btns">
            <p class="cancel" @click="isHide1">取消</p>
            <p class="confirm" @click="confirmFn">确认</p>
          </div>
        </div>
      </div>
    </div>
    <div class=" insufficientMarginDeposits1">
      <div class="box">
        <div class="Title">
          <p>提示</p>
          <i @click="isHide1">
            <img src="../../../static/img/buyCar/details/btn_close.png" alt="">
          </i>
        </div>
        <div class="conten">
          <p>您的竞拍出价为{{amount1 == '' ? 0 : amount1.getAns()}}元</p>
          <div class="btns">
            <p class="cancel" @click="isHide11">取消</p>
            <p class="confirm" @click="confirmFn1">确认</p>
          </div>
        </div>
      </div>
    </div>
    <div class="heade">
      <div class="search">
        <p><router-link to="/home">首页</router-link> > <router-link to="/buyCar">我要买车 </router-link> > <a href="javascript:void(0);">{{buyCarParams.car_style}}</a></p>
        <div>
          <input type="text" v-model='inputVal' @keyup.enter="search" placeholder="请输入品牌车型">
          <i @click="search"></i>
        </div>
      </div>
      <div class="heade_con">
        <div class="carMainPic" v-bind:style="{
          'background': 'url(' + 'http://cheyipai.ucarcloud.cn/auctionCarFile/' + buyCarParams.car_main_pic + ') no-repeat center center',
          'backgroundSize': '100% auto'
        }">
          <!-- <img :src="'http://cheyipai.ucarcloud.cn/auctionCarFile/' +buyCarParams.car_main_pic" alt=""> -->
          <p class="license">{{buyCarParams.plate_number}}</p>
        </div>
        <div class="heade_con_r">
          <h2>{{buyCarParams.car_style}}</h2>
          <div class="times">
            <p :class="stateClassNmae">{{this.stateTex}}</p>
            <div class="times_times">
              <!-- <div class="tim">
                <p style="margin-bottom:12px">开始时间 : {{carList1.bidSingle.startTime.substring(0,16)}}</p>
                <p>结束时间 : {{carList1.bidSingle.endTime.substring(0,16)}}</p>
              </div> -->
              <div class="countDown">
                <p class="p1">{{tex}} :</p>
                <p class="ti">
                  {{countDown.days}}<span> 天</span>
                  {{countDown.hours}}<span> 时</span>
                  {{countDown.minutes}}<span> 分</span>
                  {{countDown.seconds}}<span> 秒</span>
                </p>
              </div>
            </div>
          </div>
          <div class="makingBidsAt">
            <div class="highestBid ">
              <p>当前最高出价</p>
              <span>{{currentHighestPrices ? currentHighestPrices.getAns() : 0}}元</span>
            </div>
            <div class="quickBid">
              <p class="quickBidTitle">快速出价</p>
              <ul>
                <li @click="AddMoney(100)">+100元</li>
                <li @click="AddMoney(200)">+200元</li>
                <li @click="AddMoney(300)">+300元</li>
                <li @click="AddMoney(500)">+500元</li>
                <li @click="AddMoney(1000)">+1000元</li>
                <li @click="AddMoney(1500)">+1500元</li>
                <li @click="AddMoney(2000)">+2000元</li>
                <li @click="AddMoney(3000)">+3000元</li>
              </ul>
            </div>
            <div class="customizeBid">
              <p class="customizeBidTit">自定义出价</p>
              <!-- <p class="amountOfMoney"></p> -->
              <div class="PriceAmount">
                <h1>￥{{amount == '' ? 0 : amount}}</h1>
                <div class="PriceAmountInput">
                  <input type="text" v-model="amount" @input="Testing" maxlength="8" placeholder="请填写您想出的价格" id="">
                  <div @click="bidAmount">出价</div>
                </div>
              </div>
            </div>
          </div>
          <!-- <div class="PriceAmount">
            <h1>￥{{amount == '' ? 0 : amount}}</h1>
            <div class="PriceAmountInput">
              <input type="text" v-model="amount" placeholder="请填写您想出的价格" id="">
              <div @click="bidAmount">出价</div>
            </div>
            <p>注 : 在车辆投标阶段 , 仅可投标出价1次。</p>
          </div> -->
        </div>
        <div class="con" v-if="listrecordcontent.length > 0">
          <p class="tit">出价记录 ( {{carList1.totalRecords}} )</p>
          <div class="ifn">
            <!-- <ul class="title">
              <li class="nam">出价人</li>
              <li class="tim1">出价时间</li>
              <li class="sum">出价金额</li>
            </ul> -->
            <div class="HighestLisBox" v-for="(item, i) in listrecordcontent" :key="item.id" v-if="i < 1 && item.user_id != userId">
              <p class="nam">{{item.telphone}}<span>最高</span></p>
              <p class="tim1">{{item.create_time}}</p>
              <p class="sum">{{item.amount}}元</p>
            </div>
            <div class="HighestLisBox" v-else-if="i < 1 && item.user_id == userId">
              <p class="nam">{{item.telphone}}<span>最高</span><span style="color:#fdc125;border-color:#fdc125;">本人</span></p>
              <p class="tim1">{{item.create_time}}</p>
              <p class="sum">{{item.amount}}元</p>
            </div>
            <div class="lisBox" v-else-if="item.user_id != userId">
              <p class="nam">{{item.telphone}}</p>
              <p class="tim1">{{item.create_time}}</p>
              <p class="sum">{{item.amount}}元</p>
            </div>
            <div class="myLisBox" v-else-if="item.user_id == userId">
              <p class="nam">{{item.telphone}}<span>本人</span></p>
              <p class="tim1">{{item.create_time}}</p>
              <p class="sum">{{item.amount}}元</p>
            </div>
          </div>
          <!-- <div class="noRecord" v-else>
            <img src="../../../static/img/buyCar/details/buy_img_no_record.png" alt="">
            <p>暂无投标记录</p>
          </div> -->
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      tex: '距开始',
      stateClassNmae: 'state',
      stateTex: '',
      carList1: {},
      buyCarParams: {},
      countDown: {
        days: '00',
        hours: '00',
        minutes: '00',
        seconds: '00'
      },
      inputVal: '',
      amount: '',
      userLis: {},
      userId: '',
      listrecordcontent: {},
      amount1: '',
      alertLabelText: '',
      currentHighestPrices: '',
      blure: true
    }
  },
  mounted () {
    window.scrollTo(0, 0)
    // 路由传参
    this.buyCarParams = this.$route.query
    this.getFinanceData()
    // 读取本地
    let storage = window.sessionStorage
    let json = storage.getItem('WSKuserLis')
    let jsonObj = JSON.parse(json)
    if (jsonObj) {
      this.userLis = jsonObj.data.data.user
      this.userId = this.userLis.id
    }
    // 金额加 ‘,’ 号
    window.String.prototype.getAns = function () {
      var pattern = /(?=((?!\b)\d{3})+$)/g
      return this.replace(pattern, ',')
    }
    let _this = this
    setTimeout(function () {
      _this.isTim()
    }, 100)
  },
  methods: {
    // 加钱
    AddMoney (x) {
      this.getFinanceData()
      let am = this.carList1.bidSingle.currentHighestPrice ? this.carList1.bidSingle.currentHighestPrice : 0
      if (!this.carList1.bidSingle.currentHighestPrice) {
        am = 0
      }
      let adds = parseInt(am) + parseInt(x)
      this.amount1 = adds + ''
      let _this = this
      if (_this.amount1.length > 8) {
        _this.alertLabelText = '出价金额不能大于8位'
        _this.alertLabelShow()
        setTimeout(function () {
          _this.amount1 = ''
        }, 3000)
      } else {
        this.bidAmount1()
      }
      // alert(this.amount)
    },
    // 检测价格输入
    Testing () {
      let num = /^\d+$/
      if (num.test(this.amount) === false) {
        // this.alertLabelText = '请输入正确金额！'
        // this.alertLabelShow()
        this.amount = ''
      }
    },
    getFinanceData () {
      this.buyCarParams = this.$route.query
      this.$http({
        url: 'http://paimai.ucarcloud.cn/auctionCarCore/web/getCarBidInfos',
        params: {
          carId: this.buyCarParams.id,
          userId: this.buyCarParams.owner_id
        },
        headers: { from: 'web' }
      }).then(r => {
        this.carList1 = r.data.data
        let currentHighestPrices1 = r.data.data.bidSingle.currentHighestPrice + ''
        this.currentHighestPrices = currentHighestPrices1.getAns()
        switch (this.carList1.bidSingle.status) {
          case '0':
            this.stateTex = '投标中'
            this.trfo = true
            this.stateClassNmae = 'state1'
            break
          case '1':
            this.stateTex = '投 标成 功'
            this.stateClassNmae = 'state'
            this.trfo = true
            break
          case '2':
            this.stateTex = '竞拍中'
            this.trfo = false
            this.stateClassNmae = 'state2'
            break
          case '3':
            this.stateTex = '竞 拍成 功'
            this.trfo = false
            this.stateClassNmae = 'state3'
            break
          case '4':
            this.stateTex = '竞 拍失 败'
            this.trfo = false
            this.stateClassNmae = 'state3'
            break
          case '5':
            this.stateTex = '等 待竞 拍'
            this.trfo = false
            this.stateClassNmae = 'state3'
            break
          case '6':
            this.stateTex = '投 标失 败'
            this.stateClassNmae = 'state'
            this.trfo = true
            break
          case '7':
            this.stateTex = '等 待投 标'
            this.stateClassNmae = 'state'
            this.trfo = true
            break
          default:
            this.stateTex = ''
            break
        }
        // 调取出价记录接口
        this.getFinanceData1()
      })
    },
    // 倒计时
    isTim () {
      let _this = this
      let endDate = _this.carList1.bidSingle.startTime
      let serverTim = _this.carList1.serverTime
      // 服务器时间
      let newSetDa = new Date(Date.parse(serverTim.replace(/-/g, '/'))).getTime()
      // 开始时间
      let newEndDa = new Date(Date.parse(endDate.replace(/-/g, '/'))).getTime()
      // 差
      let cha = newEndDa - newSetDa
      var inter = setInterval(function () {
        cha -= 1000
        if (cha < 0) {
          if (_this.blure) {
            _this.tex = '距结束'
            endDate = _this.carList1.bidSingle.endTime
            newEndDa = new Date(Date.parse(endDate.replace(/-/g, '/'))).getTime()
            newSetDa = new Date(Date.parse(serverTim.replace(/-/g, '/'))).getTime()
            cha = newEndDa - newSetDa
            _this.getFinanceData()
            if (cha < 0) {
              cha = 0
            }
            _this.blure = false
          } else {
            cha = 0
            clearInterval(inter)
            setTimeout(function () {
              _this.getFinanceData()
            }, 10)
          }
        }
        // 计算出相差天数
        var days = Math.floor(cha / (24 * 3600 * 1000)) >= 10 ? Math.floor(cha / (24 * 3600 * 1000)) : '0' + Math.floor(cha / (24 * 3600 * 1000))
        // 计算出小时数
        var leave1 = cha % (24 * 3600 * 1000)
        var hours = Math.floor(leave1 / (3600 * 1000)) >= 10 ? Math.floor(leave1 / (3600 * 1000)) : '0' + Math.floor(leave1 / (3600 * 1000))
        // 计算相差分钟数
        var leave2 = leave1 % (3600 * 1000)
        var minutes = Math.floor(leave2 / (60 * 1000)) >= 10 ? Math.floor(leave2 / (60 * 1000)) : '0' + Math.floor(leave2 / (60 * 1000))
        // 计算相差秒数
        var leave3 = leave2 % (60 * 1000)
        var seconds = Math.round(leave3 / 1000) >= 10 ? Math.round(leave3 / 1000) : '0' + Math.round(leave3 / 1000)
        _this.countDown = {
          days: days,
          hours: hours,
          minutes: minutes,
          seconds: seconds
        }
      }, 1000)
    },
    // 关闭确认参与
    isHide1 () {
      $('.insufficientMarginDeposits1').eq(0).hide(0)
    },
    isHide11 () {
      $('.insufficientMarginDeposits1').eq(1).hide(0)
    },
    getFinanceData1 () {
      this.buyCarParams = this.$route.query
      let status = ''
      if (this.carList1.bidSingle.status === '0' || this.carList1.bidSingle.status === '1' || this.carList1.bidSingle.status === '7' || this.carList1.bidSingle.status === '6') {
        status = '0'
      } else {
        status = '1'
      }
      this.$http({
        url: 'http://paimai.ucarcloud.cn/auctionCarCore/web/BidRecords',
        params: {
          status: status,
          page: '1',
          rows: '100',
          carId: this.buyCarParams.id
        },
        headers: {'from': 'web'}
      }).then(r => {
        // console.log(r)
        this.list = r.data.data
        let lis = r.data.data.record.content
        for (let i = 0; i < lis.length; i++) {
          lis[i].create_time = lis[i].create_time.substring(0, 4) + '.' + lis[i].create_time.substring(5, 7) + '.' + lis[i].create_time.substring(8, 10) + ' ' + lis[i].create_time.substring(11, 16)
        }
        this.listrecordcontent = lis
      })
    },
    // 出价
    confirmFn () {
      let _this = this
      this.getFinanceData()
      let amountVal = this.amount === '' ? '0' : this.amount
      if (this.carList1.bidSingle.status === '3' || this.carList1.bidSingle.status === '4') {
        _this.alertLabelText = '竞拍已结束'
        _this.alertLabelShow()
        _this.insufficientMarginDeposits1Hide1()
        _this.getFinanceData1()
      } else {
        let userId = this.userId
        this.$http({
          url: 'http://paimai.ucarcloud.cn/auctionCarCore/bigSingle/submitBid',
          params: {
            userId: userId,
            carId: this.buyCarParams.id,
            amount: amountVal
          },
          headers: {'from': 'web'}
        }).then(r => {
          // console.log(r.data.message)
          if (r.data.message === '出价应大于当前最高价') {
            _this.alertLabelText = '您的出价不能低于当前最高价 ！'
          } else {
            _this.alertLabelText = r.data.message
            if (r.data.message === '拍卖已经结束') {
              _this.alertLabelText = '竞拍已结束'
            }
          }
          _this.alertLabelShow()
          _this.insufficientMarginDeposits1Hide1()
          _this.getFinanceData1()
          _this.getFinanceData()
          if (r.data.state === 'SUCCESS') {
            _this.amount = ''
          }
        })
      }
    },
    confirmFn1 () {
      this.getFinanceData()
      $('.insufficientMarginDeposits1').eq(1).hide(0)
      let amountVal = this.amount1 === '' ? '0' : this.amount1
      let userId = this.userId
      let _this = this
      this.$http({
        url: 'http://paimai.ucarcloud.cn/auctionCarCore/bigSingle/submitBid',
        params: {
          userId: userId,
          carId: this.buyCarParams.id,
          amount: amountVal
        },
        headers: {'from': 'web'}
      }).then(r => {
        // console.log(r.data.message)
        if (r.data.message === '出价应大于当前最高价') {
          _this.alertLabelText = '您的出价不能低于当前最高价 ！'
        } else {
          _this.alertLabelText = r.data.message
          if (r.data.message === '拍卖已经结束') {
            _this.alertLabelText = '竞拍已结束'
          }
        }
        _this.alertLabelShow()
        _this.insufficientMarginDeposits1Hide1()
        _this.getFinanceData1()
        _this.getFinanceData()
        if (r.data.state === 'SUCCESS') {
          _this.amount = ''
        }
      })
    },
    // 提示信息
    alertLabelShow () {
      // let _this = this
      $('.alertLabel').eq(0).fadeIn(0)
      setTimeout(function () {
        $('.alertLabel').eq(0).fadeOut(0)
      }, 3000)
    },
    // 关闭确认参与
    insufficientMarginDeposits1Hide1 () {
      $('.insufficientMarginDeposits1').eq(0).hide(0)
    },
    bidAmount () {
      let _this = this
      if (this.amount === '' || !this.amount) {
        _this.alertLabelText = '出价不能为空'
        _this.alertLabelShow()
        _this.insufficientMarginDeposits1Hide1()
        _this.getFinanceData1()
      } else {
        if (this.amount <= 99999999) {
          $('.insufficientMarginDeposits1').eq(0).width($(window).width())
          $('.insufficientMarginDeposits1').eq(0).height($(window).height())
          $('.insufficientMarginDeposits1').eq(0).offset({left: 0})
          $('.insufficientMarginDeposits1').eq(0).show(0)
        }
      }
    },
    bidAmount1 () {
      if (this.amount <= 99999999) {
        $('.insufficientMarginDeposits1').eq(1).width($(window).width())
        $('.insufficientMarginDeposits1').eq(1).height($(window).height())
        $('.insufficientMarginDeposits1').eq(1).offset({left: 0})
        $('.insufficientMarginDeposits1').eq(1).show(0)
      }
    },
    search () {
      this.$router.push({
        path: '/buyCar',
        name: '/buyCar',
        params: { inputVals: this.inputVal }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  width: 1200px;
  margin: 0 auto;
  padding-bottom: 0;
  // 提示黑框
  .alertLabel{
    display: none;
    padding: 0 20px;
    height: 50px;
    border-radius: 5px;
    line-height: 50px;
    background: rgba(0,0,0,0.8);
    color: #fff;
    text-align: center;
    font-size: 20px;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -130px;
    z-index: 10001;
  }
  .insufficientMarginDeposits1{
    display: none;
    // width: 100%;
    // height: 100%;
    background: rgba(0,0,0,0.6);
    position: fixed;
    z-index: 1000;
    overflow: hidden;
    margin-top: -71px;
    // margin-left: -108px;
    .box{
      width: 460px;
      height: 200px;
      position: absolute;
      z-index: 1001;
      background: #fff;
      border-radius: 5px;
      top: 50%;
      left: 50%;
      margin-top: -100px;
      margin-left: -230px;
      overflow: hidden;
      .Title{
        height: 40px;
        line-height: 40px;
        padding: 0 20px;
        border: 1px solid #e3e3e3;
        p{
          float: left;
          font-size: 16px;
          color: #ff6f3c;
        }
        i{
          float: right;
          display: block;
          height: 100%;
          width: 12px;
          cursor: pointer;
        }
      }
      .conten{
        p{
          margin-top: 40px;
          font-size: 16px;
          color: #333;
          text-align: center;
        }
        .btns{
          width: 62%;
          margin: 0 auto 0;
          text-align: center;
          line-height: 34px;
          overflow: hidden;
          .cancel{
            float: left;
            width: 100px;
            height: 34px;
            border-radius: 4px;
            border: 1px solid #e3e3e3;
            background: #fafafa;
            text-align: center;
            margin: 40px auto 0;
            cursor: pointer;
            font-size: 14px;
            color: #333;
          }
          .confirm{
            float: right;
            width: 100px;
            height: 34px;
            border-radius: 4px;
            background: #ff6f3c;
            text-align: center;
            margin: 40px auto 0;
            cursor: pointer;
            font-size: 14px;
            color: #fff;
          }
        }
      }
    }
  }
  .heade {
    .search {
      // width: 1200px;
      // overflow: hidden;
      height: 75px;
      line-height: 75px;
      & > p {
        float: left;
        font-size: 14px;
        color: #666;
        margin-left: -150px;
        width: 600px;
        height: 75px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        &>a{
          color: #666;
          &:hover{
            color: #ff6f3c;
          };
        };
      }
      & > div {
        float: right;
        height: 38px;
        width: 340px;
        border: 1px solid #e3e3e3;
        margin-top: 20px;
        line-height: 0;
        i {
          display: block;
          float: right;
          width: 38px;
          height: 20px;
          background: url("../../../static/img/buyCar/buy_search.png") no-repeat
            45% 1px;
          cursor: pointer;
          border-left: 2px solid #e3e3e3;
          margin-top: 8px;
        }
        input {
          width: 290px;
          height: 100%;
          padding-left: 10px;
          font-size: 14px;
          color: #333;
          &::-webkit-input-placeholder,&:-moz-placeholder,&::-moz-placeholder,&:-ms-input-placeholder {
              color: #999;
          }
        }
      }
    }
    .heade_con {
      overflow: hidden;
      .carMainPic {
        float: left;
        width: 600px;
        height: 400px;
        position: relative;
        background-size: 100% auto !important;
        img {
          width: 100%;
          height: 100%;
        }
        p {
          position: absolute;
          bottom: 0;
          width: 100%;
          height: 50px;
          line-height: 50px;
          color: #fff;
          font-size: 18px;
          text-align: center;
          background: rgba(0, 0, 0, 0.6);
        }
      }
      .heade_con_r {
        float: right;
        width: 565px;
        h2 {
          font-size: 24px;
          line-height: 30px;
          color: #333;
          height: 62px;
          overflow: hidden;
        }
        .times {
          overflow: hidden;
          padding-top: 27px;
          .state {
            background: #fdc125;
            color: #fff;
            width: 80px;
            height: 80px;
            box-sizing: border-box;
            padding: 16px;
            font-size: 18px;
            line-height: 24px;
            text-align: center;
            float: left;
          }
          .state1 {
            background: #fdc125;
            color: #fff;
            width: 80px;
            height: 80px;
            line-height: 80px;
            box-sizing: border-box;
            // padding: 16px;
            font-size: 18px;
            text-align: center;
            float: left;
          }
          .state2 {
            background: #ff6f3c;
            color: #fff;
            width: 80px;
            height: 80px;
            line-height: 80px;
            box-sizing: border-box;
            // padding: 16px;
            font-size: 18px;
            text-align: center;
            float: left;
          }
          .state3 {
            background: #ff6f3c;
            color: #fff;
            width: 80px;
            height: 80px;
            box-sizing: border-box;
            padding: 16px;
            font-size: 18px;
            line-height: 24px;
            text-align: center;
            float: left;
          }
          .times_times {
            float: left;
            height: 80px;
            background: #fafafa;
            width: 484px;
            padding: 14px 0 14px 20px;
            box-sizing: border-box;
            overflow: hidden;
            text-align: left;
            .tim {
              float: left;
            }
          }
          .countDown {
            // float: right;
            // margin-left: 100px;
            .p1{
              margin-left: 60px;
              margin-bottom:8px;
              font-size: 16px;
            }
            .ti {
              color: #ff6f3c;
              font-size: 28px;
              margin-left: 80px;
              span {
                color: #333;
                font-size: 24px;
              }
            }
          }
        }
        .makingBidsAt{
          margin-bottom: 92px;
          .highestBid{
            height: 108px;
            background: #fff8f6;
            border: 1px solid #ff6f3c;
            margin-top: 40px;
            p{
              margin: 20px 0 0px 40px;
              font-size: 16px;
              color: #333;
            }
            span{
              display: block;
              font-size: 36px;
              color: #ff6f3c;
              text-align: center;
            }
          }
          .quickBid{
            margin-top: 40px;
            .quickBidTitle{
              font-size: 18px;
              color: #333;
            }
            ul{
              width: 120%;
              overflow: hidden;
              li{
                margin-top: 20px;
                float: left;
                width: 128px;
                height: 50px;
                line-height: 50px;
                border: 1px solid #ff6f3c;
                margin-right: 15px;
                text-align: center;
                border-radius: 5px;
                font-size: 20px;
                color: #ff6f3c;
                cursor: pointer;
              }
            }
          }
          .customizeBid{
            margin-top: 40px;
            .customizeBidTit{
              font-size: 18px;
              color: #333;
            }
          }
        }
        .PriceAmount {
          margin-top: 30px;
          h1 {
            font-size: 46px;
            color: #1e1e1e;
            margin-bottom: 26px;
          }
          // &>p{
          //   color: #666;
          //   font-size: 14px;
          //   margin-top: 12px;
          // }
          .PriceAmountInput {
            height: 50px;
            line-height: 50px;
            border-radius: 5px;
            border: 1px solid #ff6f3c;
            overflow: hidden;
            div{
              width: 30%;
              background: #ff6f3c;
              color: #fff;
              font-size: 18px;
              height: 50px;
              text-align: center;
              float: right;
              cursor: pointer;
            }
            input {
              width: 68%;
              display: block;
              height: 50px;
              font-size: 18px;
              color: #333;
              padding-left: 10px;
              float: left;
            }
            input::-webkit-input-placeholder {
              color: #999;
            }
            input:-moz-placeholder {
              color: #999;
            }
            input::-moz-placeholder {
              color: #999;
            }
            input:-ms-input-placeholder {
              color: #999;
            }
          }
        }
        .numbe {
          margin: 40px 0 30px;
          font-size: 16px;
          color: #333;
          span {
            font-size: 20px;
            color: #ff6f3c;
          }
        }
        .Label {
          overflow: hidden;
          .bid {
            width: 190px;
            height: 50px;
            background: #ff6f3c;
            border-radius: 5px;
            color: #fff;
            font-size: 18px;
            line-height: 50px;
            text-align: center;
            float: left;
            cursor: pointer;
            img {
              margin-top: 14px;
              vertical-align: -4px;
              margin-right: 10px;
              width: 22px;
              height: 22px;
            }
          }
          .solicitude {
            float: left;
            cursor: pointer;
            width: 144px;
            height: 50px;
            background: #fff8f6;
            border-radius: 5px;
            color: #ff6f3c;
            font-size: 18px;
            line-height: 50px;
            text-align: center;
            border: 1px solid #ff6f3c;
            margin: 0 19px 0;
            img {
              margin-top: 13px;
              vertical-align: -4px;
              margin-right: 10px;
              width: 24px;
              height: 24px;
            }
          }
          .telephone {
            float: left;
            cursor: pointer;
            width: 190px;
            height: 50px;
            background: #fdc125;
            border-radius: 5px;
            color: #fff;
            font-size: 18px;
            line-height: 50px;
            text-align: center;
            img {
              margin-top: 14px;
              vertical-align: -5px;
              margin-right: 10px;
              width: 20px;
              height: 24px;
            }
          }
        }
      }
    }
  }
  .nam{
    width: 210px;
  }
  .tim1{
    width: 220px;
  }
  .sum{
    width: 140px;
    // margin-left: 50px;
  }
  .con{
    padding-bottom: 30px;
    width: 600px;
    padding-right: 20px;
    float: left;
    .ifn{
      max-height: 315px;
      overflow: auto;
      border-top: 1px solid #e3e3e3;
      // border-bottom: 1px solid #e3e3e3;
    }
    .tit{
      width: 100%;
      height: 60px;
      line-height: 60px;
      font-size: 18px;
      color: #333;
      text-align: left;
    }
    .noRecord{
      width: 143px;
      height: 180px;
      text-align: center;
      margin: 20px auto 30px;
      p{
        margin-top: 20px;
        width: 135px;
      }
    }
    .title{
      // padding: 44px 0 20px 0;
      overflow: hidden;
      border-bottom: 1px dashed #e3e3e3;
      // dashed  dotted
      li{
        float: left;
        text-align: center;
      }
    }
    .lisBox{
      height: 50px;
      line-height: 50px;
      border-bottom: 1px dashed #e3e3e3;
      .nam{
        width: 210px;
        text-align: left;
        padding-left: 10px;
        span:first-child{
          margin: 0 10px;
        }
        span{
          text-align: center;
        }
      };
      p{
        float: left;
        text-align: center;
      }
    }
    .HighestLisBox{
      height: 50px;
      line-height: 50px;
      border-bottom: 1px dashed #e3e3e3;
      .nam{
        text-align: left;
        padding-left: 10px;
        span:first-child{
          margin: 0 10px;
        }
        span{
          text-align: center;
        }
      };
      p{
        color: #ff6f3c;
        float: left;
        text-align: center;
        span{
          display: inline-block;
          width: 34px;
          height: 18px;
          line-height: 18px;
          border: 1px solid #ff6f3c;
          padding: 2px;
          border-radius: 5px;
        }
      }
    }
    .myLisBox{
      height: 50px;
      line-height: 50px;
      border-bottom: 1px dashed #e3e3e3;
      .nam{
        text-align: left;
        padding-left: 10px;
        span:first-child{
          margin: 0 10px;
        }
        span{
          text-align: center;
        }
      };
      p{
        color: #fdc125;
        float: left;
        text-align: center;
        span{
          display: inline-block;
          width: 34px;
          height: 18px;
          line-height: 18px;
          border: 1px solid #fdc125;
          padding: 2px;
          border-radius: 5px;
        }
      }
    }
  }
}
</style>
